import React from 'react';
import {Form, Input, Button, Select, Table, DatePicker, Message } from 'antd';
import {Link } from 'react-router';
const FormItem = Form.Item;
const Option = Select.Option;

let List = React.createClass({

  getInitialState() {
    return {
      kindList: null,
      data: [],
      pagination: {
        current: 1,
        pageSize: 10
      },
    }
  },

  componentDidMount() {
    this.handleSearch();
    this.fetchParam();
  },

  handleTableChange(pagination) {
    const pager = this.state.pagination;
    pager.current = pagination.current;
    this.setState({
      pagination: pager
    });
    this.fetch();
  },

  fetch() {
    let current = this.state.pagination.current;
    let pager = current ? current : 1;
    let id = this.props.location.state;
    let param = this.props.form.getFieldsValue();
    let params = Object.assign({}, {pageSize: 10, currentPage: pager}, param, id)
    let _me = this
    Utils.sendAjax({
      url: '/tenement/cost/list',
      data: JSON.stringify(params),
      type: 'json',
      callback: function(result) {
        if (result.code == '200') {
          _me.setState({
            data: result.data,
            pagination: result.page
          })
        } else {
          Message.error(result.message, 10)
        }
      }
    })
  },
  handleSearch() {
    this.setState({
      pagination: {
        current: 1
      }
    })
    this.fetch();
  },

  fetchParam(){

    Utils.sendAjax({
      url: '/tenement/cost/kindList',
      callback: (result) => {
        if (result.code === '200') {
          let newDom = []
          result.data.forEach((item, index)=> {
            let opt = (
              <Option key={index} value={item.costNid}>{item.costName}</Option>
            );
            newDom.push(opt)
          })
          this.setState({
            kindList: newDom,
          });
        } else {
          Message.error(result.message, 10);
        }
      }
    });
  },

  rowKey(data) {
    return data.costId;
  },

  handleReset() {
    this.props.form.resetFields();
  },

  render () {
    const { getFieldProps } = this.props.form;

    const columns = [
      {
        title: '业主姓名',
        dataIndex: 'ownerName'
      },
      {
        title: '房屋地址',
        dataIndex: 'address'
      },
      {
        title: '费用类型',
        render: (text, record) => {
          return (
            <span>{record.costName}</span>
          )
        }
      },
      {
        title: '缴纳开始日期',
        dataIndex: 'paymentStartTime'
      },
      {
        title: '缴纳结束日期',
        dataIndex: 'paymentEndTime'
      },
      {
        title: '缴纳金额',
        dataIndex: 'amount'
      },
      {
        title: '消费日期',
        dataIndex: 'expireTime'
      },
      {
        title: '备注',
        dataIndex: 'remark'
      }
    ];
    
    return (
      <div>
        <div className="search-bar">
          <Form inline>
            <FormItem label="费用开始日期">
              <DatePicker  {...getFieldProps('paymentStartTime')} placeholder="开始日期"/>&nbsp;至&nbsp;
              <DatePicker  {...getFieldProps('paymentEndTime')} placeholder="结束日期"/>
            </FormItem>
            <FormItem label="费用类别">
              <Select {...getFieldProps('costNid')} style={{width: 180}}>
                {this.state.kindList}
              </Select>
            </FormItem>
            <FormItem>
              <Button type="primary" onClick={this.handleSearch}>查询</Button>
              <Button htmlType="button" style={{marginLeft: 10}} onClick={this.handleReset}>重置</Button>
            </FormItem>
          </Form>
        </div>
        <Table rowKey={this.rowKey} columns={columns}
               onChange={this.handleTableChange}
               dataSource={this.state.data} pagination={this.state.pagination}/>
      </div>
    );
  }
});
List = Form.create()(List);
export default List